<template>
	<view>
		<view class="pt1">
			<view class="p3 flex a-c j-b" style="height: 120rpx;" @click="on_user_account()">
				<view class="flex a-c">
					<!-- <text class="bicon">&#xe6b7;</text> -->
					<text class="f30 ml2">商家入驻合作协议</text>
				</view>
				<view class="flex a-c " >
					<text class="bicon icon_color f28">&#xe6a3;</text>
				</view>
			</view>
	
		<!-- 	</view>
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe6d7;</text>
					<text class="f30 ml2">昵称</text>
				</view>
				<view class="flex a-c " @click="on_nickname(user.nickname)">
					<text class="icon_color f28">{{user.nickname}}</text>
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe63d;</text>
					<text class="f30 ml2">性别</text>
				</view>
				<view class="flex a-c" @click="Gender1()">
					<text class="icon_color f28">{{user.gender===1?'男':user.gender===2?'女':'设置'}}</text>
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
		</view>
		<view class="pb1  " @click="on_user_account">
			<view class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe67a;</text>
					<text class="f30 ml2">账号与安全</text>
				</view>
				<view class="">
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
		</view>
		<view class="pb1 ">

			<view @click="on_qing" class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe613;</text>
					<text class="f30 ml2">清理缓存</text>
				</view>
				<view class="">
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view>
			<view @click="article_view(10)" class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe663;</text>
					<text class="f30 ml2">隐私协议</text>
				</view>
				<view class="">
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view> -->
		<!-- 	<view @click="article_view(11)" class="p3 flex a-c j-b" style="height: 120rpx;">
				<view class="flex a-c">
					<text class="bicon">&#xe61a;</text>
					<text class="f30 ml2">关于我们</text>
				</view>
				<view class="">
					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view> -->
			<!-- <view @click="on_set_del" class="p3 flex a-c j-b" style="height: 120rpx;"> -->
		<!-- 		<view class="flex a-c">
					<text class="bicon">&#xe663;</text>
					<text class="f30 ml2">注销账户</text>
				</view>
				<view class="">

					<text class="bicon icon_color">&#xe6a3;</text>
				</view>
			</view> -->
		</view>
		<view class="pb1 pt1">
			<view @click="on_out()" class="p3 flex a-c j-c outBut">
				<text class="f30">退出登录</text>
			</view>
		</view>



		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-beizhu @confirm="on_gai" typenickname="nickname" :alert="alert" :title="title">
			</uni-popup-beizhu>
		</uni-popup>
		<uni-popup ref="alertDialog_acct" type="dialog">
			<uni-popup-beizhu @confirm="on_ajaxacct" :alert="alert" :title="title">
			</uni-popup-beizhu>
		</uni-popup>
		<lclipper v-if="show" :image-url="imageUrl" @success="ok_img" @cancel="show = false" />
	</view>
</template>

<script>
	import lclipper from "@/common/l-clipper/l-clipper.vue";

	export default {
		components: {
			lclipper,
		},
		data() {
			return {
				user: {},
				alert: '',
				title: '',
				show: false,
				imageUrl: '',
				face: {
					url: ''
				}
			}
		},
		onLoad() {
			this.Htpp.user_info().then(ret => {
				if (ret != 0) {
					this.user = ret.data.user;
					return
				}
			})
		},
		methods: {
			on_set_del() {
				uni.navigateTo({
					url: '/pages/banmi/user_delete'
				})
			},
			onChooseavatar(e) {

				this.imageUrl = e.detail.avatarUrl;
				this.show = true;

			},
			ok_img(url) {
				this.show = false;
				let that = this
				var img_list = new Array();
				var map = {
					path: url.url,
				};
				img_list.push(map);
			
				this.Bmupload.upload({
					files: img_list, // 必填 临时文件路径 格式: [{path: "图片地址"}]
					load: true,
					maxSize: 300000,
					typeo: 'face',
					onEachUpdate: res => {

					},
					onProgressUpdate: res => {

					}
				}).then(res => {

					that.on_face(res[0]);
				});
			},
			on_face(val) {
				var requestParams = {
					face: val,
				}
				this.Htpp.edit_face(requestParams).then(ret => {
					if (ret != 0) {
						this.user.face = ret;
						uni.setStorage({
							key: 'face',
							data: ret
						});
						return
					}
				})
			},
			on_img() {
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						that.imageUrl = tempFilePaths[0];
						that.show = true;
					}
				});

			},
			on_gai(val) {
				if (!val) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
					return
				}

				let that = this;
				let requestParams = {
					nickname: val,
					face: ''
				};
				this.Htpp.edit_nickname(requestParams).then(ret => {
					if (ret != 0) {
						this.user.nickname = val;
						this.$refs.alertDialog.close()
						return
					}
				})


			},
			on_ajaxacct(val) {

				if (!val) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
					return
				}
				this.Htpp.edit_account(val).then(ret => {
					if (ret != 0) {
						this.$refs.alertDialog_acct.close()
						this.user.account = val;
						return
					}
				})


			},
			on_acct() {
				this.title = '修改账号';
				this.alert = "请输入新的账号";
				this.$refs.alertDialog_acct.open()
			},
			on_nickname() {
				this.title = '修改昵称';
				this.alert = "请输入昵称";
				this.$refs.alertDialog.open()
			},
			Gender1() {
				var that = this;
				uni.showActionSheet({
					itemList: ['男', '女'],
					success: function(res) {
						that.Htpp.edit_Gender(res.tapIndex + 1).then(ret => {
							if (ret != 0) {
								that.user.gender = res.tapIndex + 1;
								return
							}
						})
					}
				});
			},
			on_qing() {
				uni.showLoading({
					title: '清理中...'
				})

				setTimeout(function() {
					uni.showToast({
						title: '清理完成',
						icon: "none"
					})
					uni.hideLoading();
				}, 5000);

			},
			on_user_account() {
				this.$module.navigateTo('/page1/user_account')
			},
			article_view(index) {

				uni.navigateTo({
					url: '/pages/banmi/article_view?id=' + index
				})
			},
			on_out() {
				const that=this
				uni.showLoading({
					title: '正在退出中...'
				})
				// this.Htpp.User_out().then(ret => {

				// })
				uni.removeStorageSync('user');
				uni.removeStorageSync('business');
				uni.removeStorageSync('Token');
				setTimeout(function() {
					uni.hideLoading();
					that.$module.switchTab("/pages/index/user_my")
				}, 1000);
			}

		}
	}
</script>

<style>
	.outBut{
		position: fixed;
		width: 80%;
		left: 0;right: 0;
		bottom: 100rpx;
		margin: 0 auto;padding: 20rpx 0;
		background-color: #0071FE;
		color: #fff;
		border-radius: 20rpx;
	}
	page {
		background-color: #fff;
	}

	button {

		background: none !important;
	}

	button::after {
		border: none;
	}
</style>